<template>
  <div class='container'>
    <el-dialog
        title="题目预览"
        :visible="dialogVisible"
        width="70%"
        @close="closedialog"
        @open="opendialog"
        >
        <!-- 第一行 -->
        <el-row>
            <el-col :span="6"><div class="grid-content">【题型】：{{previewlist.questionType}}</div></el-col>
            <el-col :span="6"><div class="grid-content">【编号】：{{previewlist.id}}</div></el-col>
            <el-col :span="6"><div class="grid-content"></div>【难度】：{{previewlist.difficulty}}</el-col>
            <el-col :span="6"><div class="grid-content">【标签】：{{previewlist.tags}}</div></el-col>
        </el-row>
        <!-- 第一行 -->
        <el-row style="margin:20px 0">
            <el-col :span="6"><div class="grid-content">【学科】：{{previewlist.subjectID}}</div></el-col>
            <el-col :span="6"><div class="grid-content">【目录】：{{previewlist.catalogID}}</div></el-col>
            <el-col :span="6"><div class="grid-content"></div>【方向】：{{previewlist.direction}}</el-col>
            <el-col :span="6"><div class="grid-content"></div></el-col>
        </el-row>
        <hr>
        【题干】：<br>
         <span v-html="previewlist.question"></span><br>
         <div v-if="previewlist.questionType==='单选'||previewlist.questionType==='多选'">{{previewlist.questionType}}题 选项：（以下选中的选项为正确答案）</div>
         <!-- 单选框组 -->
         <el-radio-group v-model="radio" v-if="previewlist.questionType==='单选'">
            <el-radio class="radioitem" :label="item.isRight" v-for="item in previewlist.options" :key="item.id">{{item.title}}</el-radio>
         </el-radio-group>
         <!-- 多选框组 -->
         <el-checkbox-group v-model="checkList" v-if="previewlist.questionType==='多选'">
            <el-checkbox class="radioitem" :label="item.isRight" v-for="item in previewlist.options" :key="item.id">{{item.title}}</el-checkbox>
         </el-checkbox-group>
         <hr>
        【参考答案】：<el-button type="danger" @click="openvideo">视频答案预览</el-button><br>
        <video v-if="videoshow" class="videobox" :src="previewlist.videoURL" autoplay controls></video>
        <hr>
        【答案解析】：<span v-html="previewlist.answer"></span>
        <hr>
        【题目备注】：<span v-html="previewlist.remarks"></span>

        <span slot="footer" class="dialog-footer">
          <el-button @click="closedialog" type="primary">关闭</el-button>
        </span>
      </el-dialog>
  </div>
</template>

<script>
import { difficulty, questionType } from '@/api/hmmm/constants'
import { Quedetail } from '../../api/hmmm/questions'
export default {
  data () {
    return {
      previewlist: {
        difficulty: '',
        questionType: '',
        subjectID: 0,
        catalogID: 0
      },
      radio: 1,
      checkList: [1],
      videoshow: false
    }
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    ID: {
    },
    tableData: {
      type: Array,
      default () {
        return []
      }
    }
  },
  methods: {
    closedialog () {
      this.videoshow = false
      this.$emit('closedialog')
    },
    // 打开弹框
    async opendialog () {
      const data = {}
      data.id = this.ID
      // 获取到初始化页面的数据
      const res = await Quedetail(data)
      this.previewlist = res.data
      // 对得到的数据进行格式的修改
      this.previewlist.questionType = questionType.find(item => item.value === res.data.questionType * 1).label
      this.previewlist.difficulty = difficulty.find(item => item.value === res.data.difficulty * 1).label
      this.previewlist.catalogID = this.tableData.find(item => item.catalogID === res.data.catalogID).catalog
      this.previewlist.subjectID = this.tableData.find(item => item.subjectID === res.data.subjectID).subject
      console.log(res)
    },
    // 控制视频打开
    openvideo () {
      if (this.previewlist.videoURL) {
        this.videoshow = true
      } else {
        this.$message({
          message: '没有相关视频资源哦'
        })
      }
    }

  }
}
</script>

<style scoped lang='scss'>
.dialog-footer{
  position: absolute;
  bottom: 10px;
  right: 25px;
}
.radioitem{
  display: block;
  margin:10px 0
}
.videobox{
  height: 200px;
}
</style>
